 <!-- 水质信息 -->
<template>
<div  v-loading="loading" element-loading-text="拼命加载中">
 
    <el-row>
           <!-- 搜索框 -->
      <el-col :span="24">
        <div class="search-wrapper">
          <ul class="search-box">
            <li><span class="filter-name">统计月度：</span>   <!-- 月份组件？ @change="dateChange"  -->
          <el-date-picker v-model="listQuery.staticDate" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择日期" @change="handSearch(value)"> 
          </el-date-picker>       
            </li>
            <li><span class="filter-name">河道等级：</span>
              <el-select v-model="listQuery.riverLevel" placeholder="请选择" clearable style="width:150px" class="filter-item" @change="handSearch(value)">
                 <el-option v-for="item in riverTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
              </el-select></li>
               <li><span class="filter-name">水质等级：</span>
              <el-select v-model="listQuery.qLevel" placeholder="请选择" clearable style="width:150px" class="filter-item" @change="handSearch(value)">
                <el-option v-for="item in waterTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
              </el-select></li>

              <li><span class="filter-name">河长：</span>
              <el-select v-model="listQuery.userName" placeholder="请选择" clearable style="width:150px" class="filter-item" @change="handSearch(value)">
                <el-option v-for="item in userName0ptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select></li>
              <!--
            <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch(value)">查询</el-button></li>
         -->
          </ul>
        </div>
      </el-col>
    </el-row>
        

 <!-- 表格 -->
        <el-row>
            <el-col :span="24">
                <div class="data-wrapper">
                    <template v-if="tableData!=null">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" label="全选" width="55">
                            </el-table-column>
                            <el-table-column type="index" label="序号" width="160" :index="indexMethod">
                            </el-table-column>
                            <el-table-column prop="riverCode" label="河道编号" width="120">
                            </el-table-column>
                            <el-table-column prop="riverName" label="河道名称" width="120">
                            </el-table-column>
                            <el-table-column prop="riverLevel.name" label="河道等级" width="120">
                            </el-table-column>
                            <el-table-column prop="userName" label="河长" width="120">
                            </el-table-column>
                            <el-table-column prop="month" label="统计月度" width="120">
                            </el-table-column>
                            <el-table-column prop="qLevel.name" label="水质等级" width="120">
                            </el-table-column>
          
                              <!--单行信息的删改查 -->
                            <el-table-column fixed="right" label="操作" align="center" width="200">
                                <template slot-scope="scope">
                                    <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle
                                               @click="handleView(scope.$index, scope.row)"></el-button>
                                  
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-col>
        </el-row>




    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background  
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page" 
          :page-sizes="pageSizes" 
          :page-size="listQuery.limit" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="dataCount"/>
        </div>
      </el-col>
    </el-row>





    <el-dialog title="水质详细查看" :visible.sync="dialogShow">
      <table class="col-table">
        <tr v-for="col in tableDataDetail" :key="col.q_id">
          <th>{{col.type}}</th>
          <td>{{col.value}}</td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogShow = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogShow = false">确 定</el-button>
      </div>
    </el-dialog>  

  </div>
</template>
<script>
export default {
  data() {
    return {
      //搜索框的下拉框
       riverTypeOptions: [],
       waterTypeOptions:[],
    
    


     userName0ptions: [{
                    value: '小明',
                    label: '小明'
                }, {
                    value: '小李',
                    label: '小李'
                }],

      tableData: [],
      tableDataDetail:[],
      //默认数据总数
      dataCount: 100,
      pageSizes: [5, 10, 20, 30, 40],
      //查询条件
      listQuery: {
        page: 1,//当前页
        limit: 5//每页大小
      },
      listSelect: [],
      dialogAdd: false,
      dialogShow: false,
      dialogEdit: false,
      loading: false,
      dataIndex:0,
      form: {},
      oneCol: {},
      //添加/删除的表单校验信息
     /* rules: {
        riverLevel: [
          { required: true, message: "请输入河道类型", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        riverName: [
          { required: true, message: "请输入河道名称", trigger: "change" }
        ],
       */
      formLabelWidth: "100px"
    };
  },

  
  created() {
   // this.getList();
    //this.getRiverTypeOptions();
    // this.getWaterTypeOptions();
  },
  mounted() {
    this.getList();
    this.getRiverTypeOptions();
     this.getWaterTypeOptions();
  },
  updated() {},
  destroyed() {},
  methods: {

//按日期搜索的下拉框的改变事件赋值
    dateChange(val) {
        console.log(val);
        this.listQuery.staticDate = val;
      },
    //列表查询
    getList() {
      this.loading = true;
      this.getRequest("/api/rcs/WaterQuality/getList", this.listQuery) 
        .then(res => {
          var data = res.data;
          if (data.status == 200) {
            this.tableData = data.data;
            this.dataCount = data.count; 
          } else {
            this.$message.error(data.msg);
          }
          this.loading = false;
        })
        .catch(error => {
         
          //错误信息
           this.$message.error(error);

        });
    },
    //获取河道等级的下拉列表
     getRiverTypeOptions(){
        this.getDictionary({types:["RIVER_TYPE"]}).then(res => {
          var data = res.data;
          if (data.status == 200) {
           this.riverTypeOptions = data.data["RIVER_TYPE"];
          } else {
             this.$message.error(data.msg);
          }
        })
        .catch(error => {
          //错误信息
           this.$message.error(error);
        });
    },
    //获取水质等级的下拉列表
     getWaterTypeOptions(){
        this.getDictionary({types:["WATER_TYPE"]}).then(res => {
          var data = res.data;
          if (data.status == 200) {
           this.waterTypeOptions = data.data["WATER_TYPE"];
          } else {
             this.$message.error(data.msg);
          }
        })
        .catch(error => {
          //错误信息
           this.$message.error(error);
        });
    },
    //搜索功能
    handSearch(val) {
      console.log(this.listQuery);
     
      this.getList();
    },
   

    
    handleSelectionChange(val) {
      this.listSelect = val;
    },
    indexMethod(index) {
      return (index+1)+(this.listQuery.page-1)*this.listQuery.limit;
    },
    //每页个数改变
    handleSizeChange(size) {
      this.listQuery.limit = size;
      this.listQuery.page = 1;
      this.dataIndex=0;
      this.getList();
    },
    //当前页改变
    handleCurrentChange(currentPage) {
      this.listQuery.page = currentPage;
      this.dataIndex=this.listQuery.page*this.listQuery.limit;
      this.getList();
    },

    
    
     //查看操作
   handleView(index, row) {
    this.dialogShow = true;
    this.getRequest("api/rcs/waterQuality1",{qualityId: row.qId}) 
        .then(res => {
          var data = res.data;
          if (data.status == 200) {
            this.tableDataDetail = data.data;
           
          } else {
            this.$message.error(data.msg);
          }
          this.loading = false;
        })
        .catch(error => {
         
          //错误信息
           this.$message.error(error);

        });
     },
    //显示编辑弹窗
    handleEdit(index, row) {
      this.dialogEdit = true;
      this.oneCol = row;
      
    },

 

    
  }
};
</script>

<style scoped>
.col-table{width:100%;}
.col-table{border:1px solid #ddd;border:1px solid #ddd;border-left:none;border-bottom:none}
.col-table td,.col-table th{padding:10px;border-left:1px solid #ddd;border-bottom:1px solid #ddd;}
.col-table th{width:40%;text-align: left}
.col-table tr:nth-child(odd){background:#fcfcfc;}
</style>